<template>
  <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">平台拖车工单</p>
  <div class="main">
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="searchData" class="df fww">
        <el-form-item label="订单编号：" style="width: 25%">
          <el-input v-model="searchData.orderSn" placeholder="订单编号" class="mr20" />
        </el-form-item>
        <el-form-item label="拖运司机：" style="width: 25%">
          <el-input v-model="searchData.driverName" placeholder="拖运司机" class="mr20" />
        </el-form-item>
        <el-form-item label="拖运车辆：" style="width: 25%">
          <el-input v-model="searchData.trailerCarId" placeholder="拖运车辆" class="mr20" />
        </el-form-item>
        <el-form-item label="网点地点：" style="width: 25%">
          <el-input v-model="searchData.detailDotAddress" placeholder="网点地点" class="mr20" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchDataBtn">查询</el-button>
          <el-button type="primary" plain @click="resc">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="content p20">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabsList" :key="item.name" :name="item.name">
          <template #label>
            <el-badge :value="item.number" class="item">
              <span>{{ item.name }}</span>
            </el-badge>
          </template>
        </el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" style="width: 100%" class="mt20" :header-cell-style="{ background: '#f0f6fe' }" border
        max-height="420" :show-overflow-tooltip="true">
        <el-table-column fixed label="订单编号" prop="orderSn" />
        <el-table-column label="拖运车辆" prop="carId">
          <template #default="props">
            <el-text tag="span" style="cursor: pointer" @click="checkOrderDetail(props.row)">{{
              props.row.carId
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="拖运司机" prop="driverName" />
        <el-table-column label="预约时间" prop="appointments" />
        <el-table-column label="司机到达时间" prop="arriveAt" />
        <el-table-column label="上拖车时间" prop="executeAt" />
        <el-table-column label="到场确认时间" prop="arriveCompanyAt" />
        <el-table-column label="车辆地点" prop="detailCarAddress" />
        <el-table-column label="网点地点" prop="detailDotAddress" />
        <el-table-column label="客户支付状态">
          <template #default="props">
            <el-tag type="success" v-if="props.row.billStatus == 1">已支付</el-tag>
            <el-tag type="warning" v-else-if="props.row.billStatus == 0">未支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="props">
            <el-button size="small" link type="primary" @click="checkOrderDetail(props.row)"
              v-if="roleList.read">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
        @change="handleCurrentChange" />
    </div>
    <!-- ############################################## 蒙层 ############################################## -->
    <!-- ****************************** 分配拖车 ****************************** -->
    <el-dialog v-model="centerDialogVisible" title="分配拖车" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">分配拖车</p>
        </div>
      </template>
      <el-form class="df fdc aic">
        <el-form-item label="订单编号：" style="width: 60%">
          <el-input v-model="distributionTrailerDetail.orderSn" disabled />
        </el-form-item>
        <el-form-item label="分配司机：" style="width: 60%">
          <el-select v-model="distributionTrailerDetail.driverId">
            <el-option v-for="item in driverArr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="分配拖车：" style="width: 60%; position: relative">
          <el-select v-model="distributionTrailerDetail.trailerId" @change="trailerIdChange">
            <el-option v-for="item in trailerArr" :key="item.trailerId" :label="item.carId" :value="item.trailerId" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="distributionSave"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="RucenterDialogVisible" title="拖车单结算" width="30%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">拖车单结算</p>
        </div>
      </template>
      <p style="color: #9e9e9e">是否确定提交审核，结算该拖车单费用</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="RucenterDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="RucenterDialogVisible = false"> 提交审核 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-drawer v-model="checkDetailDialogVisible" :with-header="false" size="50%" class="p20">
      <div class="df aic mb10">
        <p style="font-size: 1.125rem; color: #3d3d3d; font-weight: bold" class="mr10">
          {{ carInfoOrderDetail.estimateInfo.carInfo.value.号牌号码 }}
        </p>
        <el-tag size="small">{{ carInfoOrderDetail.orderDetail.orderStatus }}</el-tag>
      </div>
      <p style="font-size: 0.75rem">
        品牌型号：{{ carInfoOrderDetail.estimateInfo.carInfo.value.品牌型号 }}&nbsp;|&nbsp; 车辆类型：{{
          carInfoOrderDetail.estimateInfo.carInfo.value.车辆类型
        }}&nbsp;|&nbsp; 异常状况：
        <span v-if="carInfoOrderDetail.estimateInfo.exceptionType == null">完整</span>
        <span v-else-if="carInfoOrderDetail.estimateInfo.exceptionType == 0">缺件</span>
        <span v-else-if="carInfoOrderDetail.estimateInfo.exceptionType == 1">废钢车</span>
      </p>
      <div class="part mt20" v-if="
        carInfoOrderDetail.orderDetail.missingPart.value.length != 0 &&
        carInfoOrderDetail.estimateInfo.exceptionType != 1
      ">
        <p style="color: #1d2129">缺件情况</p>
      </div>
      <div style="width: 100%" class="df jcsb fww p20" v-if="
        carInfoOrderDetail.orderDetail.missingPart.value.length != 0 &&
        carInfoOrderDetail.estimateInfo.exceptionType != 1
      ">
        <div style="width: 46%" v-for="item in carInfoOrderDetail.orderDetail.missingPart.value" :key="item.name">
          <p style="font-size: 0.875rem; color: #b2b2b2">{{ item.name }}</p>
          <div class="df jcse" style="width: 100%">
            <el-slider disabled size="small" class="mr20" style="width: 70%" v-model="item.number" :step="1"
              :max="item.maxNumber" :min="0" show-stops />
            <el-input-number disabled size="small" style="width: 30%" v-model="item.number" :max="5" :min="0" />
          </div>
        </div>
      </div>
      <div class="part mt20" v-if="
        carInfoOrderDetail.orderDetail.missingPart.value.length != 0 &&
        carInfoOrderDetail.estimateInfo.exceptionType != 1 &&
        carInfoOrderDetail.orderDetail.orderStatus == '司机入场确认'
      ">
        <p style="color: #1d2129">拆解厂确认缺件情况</p>
      </div>
      <div style="width: 100%" class="df jcsb fww p20" v-if="carInfoOrderDetail.orderDetail.orderStatus == '司机入场确认'">
        <div style="width: 46%" v-for="item in carInfoOrderDetail.orderDetail.newMissingPart" :key="item.name">
          <p style="font-size: 0.875rem; color: #b2b2b2">{{ item.name }}</p>
          <div class="df jcse" style="width: 100%">
            <el-slider disabled size="small" class="mr20" style="width: 70%" v-model="item.number" :step="1"
              :max="item.maxNumber" :min="0" show-stops />
            <el-input-number disabled size="small" style="width: 30%" v-model="item.number" :max="5" :min="0" />
          </div>
        </div>
      </div>
      <div class="part mt20" v-if="carInfoOrderDetail.orderDetail.licenseConfirmInfo != null">
        <p style="color: #1d2129">书面材料情况</p>
      </div>
      <div style="width: 100%" class="df jcsb fww p20" v-if="carInfoOrderDetail.orderDetail.licenseConfirmInfo != null">
        <div class="df jcse aic mb10" style="width: 46%"
          v-for="item in carInfoOrderDetail.orderDetail.licenseConfirmInfo.value" :key="item.id">
          <p style="width: 50%; font-size: 0.875rem; color: #b2b2b2">
            {{ item.证件名 }}
          </p>
          <el-radio-group v-model="item.确认情况" style="width: 36%" disabled>
            <el-radio :label="false" size="small">无</el-radio>
            <el-radio :label="true" size="small">有</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="part mt20" v-if="
        carInfoOrderDetail.orderDetail.newLicenseConfirm != null &&
        carInfoOrderDetail.orderDetail.orderStatus == '司机入场确认'
      ">
        <p style="color: #1d2129">拆解厂确认书面材料情况</p>
      </div>
      <div style="width: 100%" class="df jcsb fww p20" v-if="
        carInfoOrderDetail.orderDetail.newLicenseConfirm != null &&
        carInfoOrderDetail.orderDetail.orderStatus == '司机入场确认'
      ">
        <div class="df jcse aic mb10" style="width: 46%"
          v-for="item in carInfoOrderDetail.orderDetail.newLicenseConfirm" :key="item.id">
          <p style="width: 50%; font-size: 0.875rem; color: #b2b2b2">
            {{ item.证件名 }}
          </p>
          <el-radio-group v-model="item.确认情况" style="width: 36%" disabled>
            <el-radio :label="false" size="small">无</el-radio>
            <el-radio :label="true" size="small">有</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="part mt20" v-if="!consignFlag">
        <p style="color: #1d2129">拖运信息</p>
      </div>
      <div style="width: 100%" class="df jcsb fww p20" v-if="!consignFlag">
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">拖运司机：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.driverName != null ? carInfoOrderDetail.orderDetail.driverName : '-' }}
          </p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">联系电话：</p>
          <p style="font-size: 0.875rem" class="ml10">{{ carInfoOrderDetail.orderDetail?.phone }}</p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">拖运车辆：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.trailNum != null ? carInfoOrderDetail.trailNum : '-' }}</p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">拖运费用：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.driverIncome }}
          </p>
        </div>
      </div>
      <div class="part mt20">
        <p style="color: #1d2129">订单信息</p>
      </div>
      <div style="width: 100%" class="df jcsb fww p20">
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">预约单号：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.estimateInfo.id }}
          </p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">预约时间：</p>
          <p style="font-size: 0.875rem" class="ml10">{{ carInfoOrderDetail.orderDetail.appointments }}</p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">司机到达时间：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.arriveAt != null ? carInfoOrderDetail.orderDetail.arriveAt : '-' }}</p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">支付时间：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.payTime != null ? carInfoOrderDetail.orderDetail.payTime : '-' }}</p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">上拖车时间：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.executeAt != null ? carInfoOrderDetail.orderDetail.executeAt : '-' }}</p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">到场确认时间：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.arriveCompanyAt != null ? carInfoOrderDetail.orderDetail.arriveCompanyAt : '-' }}</p>
        </div>              
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">入场检测时间：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.finishAt != null ? carInfoOrderDetail.orderDetail.finishAt : '-' }}</p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">预约人：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.personName }}
          </p>
        </div>
        <div class="df jcs aic mb10" style="width: 46%">
          <p style="font-size: 0.875rem; color: #b2b2b2">联系电话：</p>
          <p style="font-size: 0.875rem" class="ml10">
            {{ carInfoOrderDetail.orderDetail.phone }}
          </p>
        </div>
      </div>
      <div class="part mt20">
        <p style="color: #1d2129">派送信息</p>
      </div>
      <div style="width: 100%" class="p20">
        <div class="df jcsb">
          <div class="df aic">
            <div class="curcle"></div>
            <div class="tips">取</div>
            <div style="font-size: 0.875rem">
              {{ carInfoOrderDetail.orderDetail.detailCarAddress }}
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="df jcsb">
          <div class="df aic">
            <div class="curcle"></div>
            <div class="tips">送</div>
            <div style="font-size: 0.875rem">
              {{ carInfoOrderDetail.orderDetail.detailDotAddress }}
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" plain @click="checkDetailDialogVisible = false">取消</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import {
  RequestDispatchCompanyGetOrder,
  RequestOrderDetailGetOrderDetail,
  RequestTransportDriversList,
  RequestDispatchTrailerAndDriver,
  RequestTrailerList,
  RequestGetOrderStatusCountByCompany,
} from '@/api/path/index.js';
import { reactive, ref } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import { formatTimeAll } from '@/filters/index';
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
const searchData = ref<any>({
  detailDotAddress: null,
  trailerCarId: null,
  driverName: null,
  orderSn: null,
});
const tabsList = ref<any>([
  {
    name: '全部',
    number: 0
  }, {
    name: '等待接单',
    number: 0
  }, {
    name: '预约成功',
    number: 0
  }, {
    name: '待现场确认',
    number: 0
  }, {
    name: '待司机确认',
    number: 0
  }, {
    name: '待用户确认',
    number: 0
  }, {
    name: '待上拖车',
    number: 0
  }, {
    name: '到场拍照',
    number: 0
  }, {
    name: '拆解厂确认',
    number: 0
  }, {
    name: '司机入场确认',
    number: 0
  }, {
    name: '待入场',
    number: 0
  }, {
    name: '已取消',
    number: 0
  }, {
    name: '已完成',
    number: 0
  }
]);
function initStatusCount() {
  RequestGetOrderStatusCountByCompany().then((res: any) => {
    for (let index = 0; index < res.resultObj.length; index++) {
      tabsList.value[0].number += res.resultObj[index].coalesce;
      tabsList.value.forEach((item: any) => {
        if (res.resultObj[index].status_name == item.name) {
          item.number = res.resultObj[index].coalesce;
        }
      });
    }
    console.log('tabsList.value', tabsList.value);
    console.log('tabsList.value[0].number-------------------------------------------------------------', tabsList.value[0].number);
  });
}
initStatusCount();
const activeName = ref('全部');
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
const centerDialogVisible = ref<any>(false);
const RucenterDialogVisible = ref<any>(false);
/* *********************************** 分页获取数据 *********************************** */
const total = ref<any>(0);
const currentPage = ref<any>(1);
const pageSize = ref<any>(10);
const handleSizeChange = (val: number) => {
  getData('');
};
const handleCurrentChange = (val: number) => {
  getData(changeTab.value);
};
const tableData = ref<any>([]);
const changeTab = ref<any>('');
//全部
const getData = (changeTab: any) => {
  RequestDispatchCompanyGetOrder({
    page: currentPage.value,
    rows: pageSize.value,
    detailDotAddress: searchData.value.detailDotAddress,
    trailerCarId: searchData.value.trailerCarId,
    driverName: searchData.value.driverName,
    orderSn: searchData.value.orderSn,
    companyNode: JSON.parse(localStorage.getItem('roleInfo')!).company,
    orderStatus: changeTab,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.appointments = formatTimeAll(item.appointments);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
    console.log(res.resultObj);
  });
};
getData('');
const searchDataBtn = () => {
  getData('');
};
const resc = () => {
  (searchData.value.detailDotAddress = null),
    (searchData.value.trailerCarId = null),
    (searchData.value.driverName = null),
    (searchData.value.orderSn = null),
    (activeName.value = '全部'),
    (changeTab.value = '');
  getData('');
};
const handleClick = (tab: any, event: any) => {
  console.log(tab.props.name);
  currentPage.value = 1;
  if (tab.props.name == '全部') {
    changeTab.value = '';
    getData(changeTab.value);
  } else {
    changeTab.value = tab.props.name;
    getData(changeTab.value);
  }
};

// 查看
const carInfoOrderDetail = ref<any>({});
const consignFlag = ref<any>(false); //拖运信息
const checkDetailDialogVisible = ref<any>(false);
const checkOrderDetail = (row: any) => {
  RequestOrderDetailGetOrderDetail(row.id).then((res: any) => {
    if (res.success == true) {
      res.resultObj.estimateInfo.carInfo.value = JSON.parse(res.resultObj.estimateInfo.carInfo.value);
      if (res.resultObj.orderDetail.licenseConfirmInfo != null) {
        res.resultObj.orderDetail.licenseConfirmInfo.value = JSON.parse(
          res.resultObj.orderDetail.licenseConfirmInfo.value,
        );
      }
      res.resultObj.orderDetail.missingPart.value = JSON.parse(res.resultObj.orderDetail.missingPart.value);
      res.resultObj.orderDetail.missingPart.value.forEach((item: any) => {
        if (item.checked == true) {
          item.number = 0;
        }
      });
      if (res.resultObj.orderDetail.newMissingPart != null) {
        res.resultObj.orderDetail.newMissingPart.forEach((item: any) => {
          if (item.checked == true) {
            item.number = 0;
          }
        });
      }
      carInfoOrderDetail.value = res.resultObj;
      if (carInfoOrderDetail.value.transportDriver == null) {
        consignFlag.value = true;
      } else {
        consignFlag.value = false;
      }
      checkDetailDialogVisible.value = true;
    }
  });
};
/* ------------------------------------------- 分配拖车 -------------------------------------------*/
const driverArr = ref<any>([]); //司机列表
const getDriverList = () => {
  console.log(driverArr.value);
  RequestTransportDriversList(JSON.parse(localStorage.getItem('roleInfo')!).company).then((res: any) => {
    // res.resultObj.forEach((item: any) => {
    //     item.driverId = JSON.stringify(item.driverId)
    // });
    driverArr.value = res.resultObj;
  });
};
const distributionTrailerDetail = ref<any>({});
const distributionTrailer = (event: any) => {
  getDriverList();
  driverIdChange();
  // getData(changeTab.value)
  centerDialogVisible.value = true;
  distributionTrailerDetail.value = event;
};
const trailerIdChange = (e: any) => {
  trailerArr.value.forEach((item: any) => {
    if (item.trailerId == e) {
      distributionTrailerDetail.value.carId = item.carId;
    }
  });
};
const distributionSave = () => {
  if (
    distributionTrailerDetail.value.driverId == null ||
    distributionTrailerDetail.value.trailerId == null ||
    distributionTrailerDetail.value.id == null
  ) {
    ElMessage({
      type: 'warning',
      message: '司机或拖车不能为空',
    });
    return;
  }
  let formData = new FormData();
  formData.append('driverId', distributionTrailerDetail.value.driverId);
  formData.append('trailerId', distributionTrailerDetail.value.trailerId);
  formData.append('orderId', distributionTrailerDetail.value.id);
  RequestDispatchTrailerAndDriver(formData).then((res: any) => {
    console.log(res);
    if (res.success == true) {
      centerDialogVisible.value = false;
      getData(changeTab.value);
      initStatusCount();
      ElMessage.success(res.resultObj);
    } else {
      ElMessage.error(res.msg);
    }
  });
};
const trailerArr = ref<any>([]);
const driverIdChange = () => {
  RequestTrailerList(JSON.parse(localStorage.getItem('roleInfo')!).company).then((res: any) => {
    res.resultObj.forEach((item: any) => {
      item.trailerId = String(item.trailerId);
    });
    trailerArr.value = res.resultObj;
  });
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;

  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-icon svg {
    color: #fff;
  }

  .el-form {
    .el-icon svg {
      color: #dcdfe6;
    }
  }
}

.curcle {
  width: 1rem;
  height: 1rem;
  border: 0.125rem solid #116cf8;
  border-radius: 50%;
  margin-right: 1rem;
}

.tips {
  font-size: 0.75rem;
  color: #116cf8;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
  background-color: #cee6ff;
  border-radius: 0.1875rem;
  margin-right: 0.625rem;
}

.part {
  background-color: #f5f7fb;
  width: 100%;
  height: 1.875rem;
  line-height: 1.875rem;
  padding-left: 0.625rem;
}

.line {
  width: 0.125rem;
  height: 1.5rem;
  margin: 0.25rem 0;
  margin-left: 0.4375rem;
  background-color: #e5e8ed;
}
</style>
